<template>
    <div class="legend-span legend-spand">
        <div class="legend-flex " v-show="earthQuakeShow">
            <div class="legend-item">
                <span>地震烈度:</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon"></div>
                <span>震中</span>
            </div>
            <div class="legend-item">
                <div class="nine-icon"></div>
                <span>IX(9度)</span>
            </div>
            <div class="legend-item">
                <div class="nine-icon eight-icon"></div>
                <span>VIII(8度)</span>
            </div>
            <div class="legend-item">
                <div class="nine-icon seven-icon"></div>
                <span>VII(7度)</span>
            </div>
            <div class="legend-item">
                <div class="nine-icon six-icon"></div>
                <span>VI(6度)</span>
            </div>
        </div>
        <div class="legend-flex " v-show="typhoonShow">
            <div class="legend-item">
                <span>台风:</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-one"></div>
                <span>热带低压</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-two"></div>
                <span>热带风暴</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-three"></div>
                <span>强热带风暴</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-four"></div>
                <span>台风</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-five"></div>
                <span>强台风</span>
            </div>
            <div class="legend-item">
                <div class="circle-icon circle-icon-six"></div>
                <span>超强台风</span>
            </div>
        </div>

        <div class="legend-flex" v-show="rainShow">
            <div class="legend-item">
                <span>降水量：</span>
            </div>
            <div class="legend-item">
                <div class="none-color"></div>
                <span>无降水</span>
            </div>
            <div class="legend-item">
                <div class="none-color green-icon"></div>
                <span>0-10mm</span>
            </div>
            <div class="legend-item">
                <div class="none-color dark-green"></div>
                <span>10-25mm</span>
            </div>
            <div class="legend-item">
                <div class="none-color blue-icon"></div>
                <span>25-50mm</span>
            </div>
            <div class="legend-item">
                <div class="none-color dark-blue"></div>
                <span>50-100mm</span>
            </div>
            <div class="legend-item">
                <div class="none-color pink-icon"></div>
                <span>100-250mm</span>
            </div>
        </div>
        <div class="legend-flex legend-tem" v-show="temperatureShow">
            <div class="legend-item">
                <span>气温：</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-01"></div>
                <span class="legend-item-span"><-32</span>
                        <div class="none-color tem-icon-02"></div>
                        <span class="legend-item-span">4~8</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-03"></div>
                <span class="legend-item-span">-32~-28</span>
                <div class="none-color tem-icon-04"></div>
                <span class="legend-item-span">8~12</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-05"></div>
                <span class="legend-item-span">-28~-24</span>
                <div class="none-color tem-icon-06"></div>
                <span class="legend-item-span">12~16</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-07"></div>
                <span class="legend-item-span">-24~-20</span>
                <div class="none-color tem-icon-08"></div>
                <span class="legend-item-span">16~20</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-09"></div>
                <span class="legend-item-span">-20~-16</span>
                <div class="none-color tem-icon-10"></div>
                <span class="legend-item-span">20~24</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-11"></div>
                <span class="legend-item-span">-16~-12</span>
                <div class="none-color tem-icon-12"></div>
                <span class="legend-item-span">24~28</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-13"></div>
                <span class="legend-item-span">-12~-8</span>
                <div class="none-color tem-icon-14"></div>
                <span class="legend-item-span">28~32</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-15"></div>
                <span class="legend-item-span">-8~-4</span>
                <div class="none-color tem-icon-16"></div>
                <span class="legend-item-span">32~35</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-17"></div>
                <span class="legend-item-span">-4~0</span>
                <div class="none-color tem-icon-18"></div>
                <span class="legend-item-span">≥35</span>
            </div>
            <div class="legend-item">
                <div class="none-color tem-icon-19"></div>
                <span>0~4</span>
            </div>
        </div>
        <div class="legend-flex" v-show="humidityShow">
            <div class="legend-item">
                <span>湿度：</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-01"></div>
                <span>0-10%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-02"></div>
                <span>10-20%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-03"></div>
                <span>20-30%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-04"></div>
                <span>30-40%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-05"></div>
                <span>40-50%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-06"></div>
                <span>50-60%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-07"></div>
                <span>60-70%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-08"></div>
                <span>70-80%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-09"></div>
                <span>80-90%</span>
            </div>
            <div class="legend-item">
                <div class="none-color hum-icon-10"></div>
                <span>90-100%</span>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
 
import bus from '@/utils/bus';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

const earthQuakeShow = ref(false)
const typhoonShow = ref(false)
const rainShow = ref(false)
const temperatureShow = ref(false)
const humidityShow = ref(false)

const changeLegend = (obj)=>{
    switch (obj.type) {
        case 'earthQuake':
            earthQuakeShow.value = obj.value;
            typhoonShow.value = !obj.value;
            rainShow.value = !obj.value;
            temperatureShow.value = !obj.value;
            humidityShow.value = !obj.value;
            break;
        case 'typhoon':
            typhoonShow.value = obj.value;
            earthQuakeShow.value = !obj.value;
            rainShow.value = obj.value;
            temperatureShow.value = !obj.value;
            humidityShow.value = !obj.value;
            break;
        case 'rain':
            rainShow.value = obj.value;
            typhoonShow.value = false;
            earthQuakeShow.value = false;
            temperatureShow.value = false;
            humidityShow.value = false;
            break;
        case 'temperature':
            temperatureShow.value = obj.value;
            humidityShow.value = !obj.value;
            rainShow.value = !obj.value;
            break;
        case 'humidity':
            humidityShow.value = obj.value;
            temperatureShow.value = !obj.value;
            rainShow.value = !obj.value;
            break;
        default:
            break;
    }
}

onMounted(() => {
    console.log(`the component is now mounted.`)
    bus.on('changeLegend', (data) => {
        changeLegend(data);
    })
})
 
onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
})
</script>

<style scoped lang="scss">
.legend-span {
    min-width: 140px;
    position: absolute;
    bottom: 85px;
    left: 385px;
    z-index: 5;
    color: #000000;
    background: rgba(255, 255, 255, 0.75);
    // border: 1px solid #FFFFFF;
    border-radius: 4px;

    // padding-bottom: 10px;
    .legend-flex {
        line-height: 36px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 15px;
        padding-bottom: 10px;
        border: 1px solid #12B0E2;

        .legend-item {
            display: flex;
            flex-direction: row;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;
            cursor: pointer;

            span {
                height: 14px;
                font-size: 14px;

                font-weight: 500;
                line-height: 29px;
                text-indent: 5px;
            }

            .legend-item-span {
                min-width: 70px;
                margin-right: 5px;
            }

            .tem-icon-01 {
                background: #80007B;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-02 {
                background: #C4FFB7;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-03 {
                background: #003085;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-04 {
                background: #BAFF83;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-05 {
                background: #1260A4;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-06 {
                background: #FAFF97;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-07 {
                background: #2075D2;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-08 {
                background: #FEF3C5;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-09 {
                background: #39A1F3;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-10 {
                background: #FDDDAD;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-11 {
                background: #72D2F9;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-12 {
                background: #FFAE72;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-13 {
                background: #96E1F4;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-14 {
                background: #FC8785;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-15 {
                background: #BEF9FF;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-16 {
                background: #FF5502;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-17 {
                background: #F1FFFF;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-18 {
                background: #EC5B5F;
                border: 1px solid #FFFFFF;
            }

            .tem-icon-19 {
                background: #DFFFD8;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-01 {
                background: #97E8AD;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-02 {
                background: #99D2CA;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-03 {
                background: #9BBCE8;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-04 {
                background: #6B9DE1;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-05 {
                background: #3B7EDB;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-06 {
                background: #2B5CC2;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-07 {
                background: #1C3BA9;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-08 {
                background: #112C90;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-09 {
                background: #071E78;
                border: 1px solid #FFFFFF;
            }

            .hum-icon-10 {
                background: #000F50;
                border: 1px solid #FFFFFF;
            }

            .circle-icon {
                width: 11px;
                height: 11px;
                background: #FFDE00;
                border: 1px solid #FFFFFF;
                border-radius: 50%;
                margin-top: 8px;
                margin-left: 5px;
                margin-right: 5px;
            }

            .nine-icon {
                margin-top: 8px;
                width: 21px;
                height: 10px;
                background: #B43940;
                border: 1px solid #FFFFFF;
            }

            .eight-icon {
                background: #EF9F9B;
                border: 1px solid #FFFFFF;
            }

            .seven-icon {
                background: #FECED5;
                border: 1px solid #FFFFFF;
            }

            .six-icon {
                background: #F6DDE1;
                border: 1px solid #FFFFFF;
            }

            .none-color {
                margin-top: 8px;
                min-width: 21px;
                height: 10px;
                border: 1px solid #FFFFFF;
            }

            .green-icon {
                background: #ABF287;
                border: 1px solid #FFFFFF;
            }

            .dark-green {
                background: #3FA40B;
                border: 1px solid #FFFFFF;
            }

            .blue-icon {
                background: #61BBF4;
                border: 1px solid #FFFFFF;
            }

            .dark-blue {
                background: #0007EE;
                border: 1px solid #FFFFFF;
            }

            .pink-icon {
                background: #F903F7;
                border: 1px solid #FFFFFF;
            }
        }

        .circle-icon-one {
            background: #30FC31 !important;
        }

        .circle-icon-two {
            background: #307EFA !important;
        }

        .circle-icon-three {
            background: #FFFC00 !important;
        }

        .circle-icon-four {
            background: #FF9C00 !important;
        }

        .circle-icon-five {
            background: #FB7CFF !important;
        }

        .circle-icon-six {
            background: #FA3030 !important;
        }
    }

    .legend-border {
        border-bottom: 1px dashed #666;
        ;
    }
}
</style>